<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
    >
      <a-spin :tip="i18n('tips.automatic','自动登录中...')" :spinning="isLoading" size="large">
        <div class="hermg"><img src="../../image/log.png"></div>
        <div align="center" class="jpaas">
          <div >{{i18n('message.platform','JPAAS企业级的微服务架构平台')}}</div>
        </div>
        <a-form-item style="margin-top:24px">
          <a-button
            size="large"
            type="primary"
            class="login-button"
            @click="loginAgain"
          >{{i18n('form.relanding','重新登陆')}}</a-button>
          <a-button
            size="large"
            type="primary"
            class="login-button"
            @click="loginPawd"
          >{{i18n('form.login','账号密码登陆')}}</a-button>
        </a-form-item>
      </a-spin>
    </a-form>

  </div>
</template>

<script>


  import { mapActions } from 'vuex'
  import { timeFix } from '@/utils/util'
  import  uuid  from '@/utils/uuid'
  import { ACCESS_TOKEN } from '@/store/mutation-types'

  import LoginApi from '@/api/login'

  export default {
    data () {
      return {
        isLoading:true,
        deviceId:null,
        form: this.$form.createForm(this),
        state: {
          time: 60,
        }
      }
    },
    created () {
      this.casLogin();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "viewsUser", key);
        },
      ...mapActions({
        AuthorizeLogin:'user/AuthorizeLogin',
        Logout: 'user/Logout'
      }),
      loginPawd(){
        this.$router.push({ name: 'login' });
      },
      loginAgain(){
        this.isLoading=true;
        this.jumpNewUrl();
      },
      jumpNewUrl(){
        var encoderContent = "https://g1openid.crcc.cn/oauth/authorize?response_type=code&scope=openid%20profile&client_id=crcc25-kf&state=coremail_stat&redirect_uri=http://kf.zt25j.com:8099";
        window.location.href = encoderContent;
      },
      // name 是你要获取的那个参数的字段 比如 code=我是谁 name 就是 code
      getQueryString (name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        var r = decodeURIComponent(window.location.search).substr(1).match(reg)
        if (r !== null) return r[2]
        return null
      },
      clicklist(){
        this.$router.push({ name: 'forget'})
      },
      casLogin(){
        var baseURL = process.env.VUE_APP_API_BASE_URL
        if(this.getQueryString('token') != null) {
          this.isLoading=false;
          var token = decodeURIComponent(this.getQueryString('token'));
          var key = decodeURIComponent(this.getQueryString('key'));
          Vue.ls.set(ACCESS_TOKEN, token, 12 * 60 * 60 * 1000)
          this.$store.commit('SET_TOKEN', token)

          this.$router.push({ name: 'index' }, () => {
            this.$notification.success({
              message: this.i18n('tips.welcome','欢迎'),
              description: `${timeFix()}，` + this.i18n('tips.welcomeBack','欢迎回来!')
            })
          });
        }
        /**
         * 下面的代码是测试中铁25局单点登陆的代码，开发可以屏蔽
         */
        var code =this.getDecodeURIQueryString('code');
        var state =this.getDecodeURIQueryString('state');

        //开始浏览器输入地址时跳转
        if (!code && !state) {
         // this.jumpNewUrl();
          return;
        }

        //中铁登录成功后回调
        if (code && state) {
          this.authorize(code);
          return;
        }
      },

      authorize(code) {
        const {
          state,
          AuthorizeLogin
        } = this;
        AuthorizeLogin(code)
          .then((res) => this.loginSuccess(res))
          .catch(err => this.requestFailed(err))
      },

      // name 是你要获取的那个参数的字段 比如 code=我是谁 name 就是 code
      getDecodeURIQueryString (variable) {
        var newUrl =decodeURIComponent(window.location.search);
        if(newUrl.indexOf("/?")>-1){
          var urlList = newUrl.split("/?");
          newUrl= urlList[1];
        }
        var param =newUrl;
        if(param.indexOf("&")>-1){
          var list = param.split("&");
          for(var i=0;i<list.length;i++){
            var obj = list[i];
            if(obj.indexOf(variable)>-1){
              var returnList =obj.split("=");
              return returnList[1];
            }
          }
        }else{
          if(param.indexOf(variable)>-1){
            var returnList =param.split("=");
            return returnList[1];
          }
        }
        return null;
      },
      loginSuccess (res) {
        this.isLoading=false;
        if (res.code === 200) {
          this.$router.push({ name: 'home-index' }, () => {
            this.$notification.success({
              message: this.i18n('tips.welcome','欢迎'),
              description: `${timeFix()}，` + this.i18n('tips.welcomeBack','欢迎回来!')
            })
          })
        } else {
          this.requestFailed(res)
        }
      },
      requestFailed (err) {
        this.isLoading=false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .main{
    overflow: hidden;
    width:450px!important;
    background-color: #ffffff;
    box-shadow: 0px 0px 49px 0px
    rgba(7, 63, 126, 0.24);
    border-radius: 2px;
  }
  .hermg
  {
    width: 54px;
    margin: auto;
    margin-top: 31px;
    img{
      width: 54px;
    }
  }
  .jpaas {
    margin-top: 20px;
    font-size: 20px;
    color: #555555;
  }
  .jpaasbutton{
    overflow: hidden;
    margin: auto;
    margin-top:16px;
    padding-bottom: 30px;
  }
  .imgwing img{
    width: 100%;
    height: 40px;
  }
  .ant-tabs-nav-wrap{
    border-bottom:1px solid #eeeeee!important;
    // borderBottom: 'unset'
  }
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      display: block;
      padding: 0 10px;
      margin: 10px auto;
      font-size: 16px;
      height: 40px;
      width: 60%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>
